<!-- 我的金币 -->
<template>
  <view id="money">
    <TabSelector :tabs="tabs" :initialIndex="0" @change="handleChange" />
    <view v-if="flag == 0">
      <!-- 签到获取金币 -->
      <Money></Money>
    </view>
    <view v-else-if="flag == 1">
      <!-- 明细内容 -->
      <Details />
    </view>
    <view v-else-if="flag == 2">
      <!-- 充值内容 -->
      <Recharge />
    </view>
  </view>
</template>

<script lang="ts" setup>
import signInIcon from '@/static/My/signIn.png'
import { ref, onMounted, nextTick, provide } from 'vue'
import TabSelector from './TabSelector.vue'
import Recharge from './Recharge.vue'
import Details from './Details.vue'
import Money from "./Money.vue";
import { signupAPI, getMoneyAPI } from '@/services/my'

interface TabItem {
  label: string
  value: string
}
const money = ref(0) || 0
const tabs: TabItem[] = [
  { label: '余额', value: 'balance' },
  { label: '明细', value: 'Details' },
  { label: '充值', value: 'recharge' },
]

const flag = ref(0)
const handleChange = (index: number) => {
  flag.value = index
}
const userId = uni.getStorageSync('userInfo').id || ''

// 签到获取金币的接口
const signUp = async () => {
  if (userId) {
    const data = await signupAPI(userId)
    console.log(data)
    if (data.code == 200) {
      uni.showToast({
        title: data.msg,
        icon: 'success',
      })
      money.value = data.money
    } else if (data.code == 201) {
      uni.showToast({
        title: data.msg,
        icon: 'error',
      })
    }
  } else {
    uni.showToast({
      title: '请先登录',
      icon: 'error',
    })
  }
}
// 进入页面获取金币的接口
const getmoney = async () => {
  if (userId) {
    const data = await getMoneyAPI(userId)
    console.log(data)
    if (data.code == 200) {
      money.value = data.money
    }
  } else {
    uni.showToast({
      title: '请先登录',
      icon: 'error',
    })
  }
}
onMounted(() => {
  nextTick(() => {
    getmoney()
  })
})
</script>

<style lang="scss" scoped>
#money {
  width: 100%;
  height: 10vh;
  padding: 0 3%;
  box-sizing: border-box;
}

.money-flex {
  display: flex;
  align-items: center;
  height: 15vh;
}

.money-flex-item {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.money {
  width: 12vh;
  height: 12vh;
}

.CurrentGoldCoins {
  width: 20vh;
  height: auto;
  justify-content: flex-end;
  color: #9a9a9b;
  font-size: 2vh;
}

.CurrentGoldCoins-text {
  padding-left: 5vh;
  font-size: 6vw;
  color: #e9763a;
}

.money-button-flex {
  width: 43vw;
  // padding: 10px 20px;
}

.money-button {
  border-radius: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #41ade3;
  // 禁止换行
  white-space: nowrap;
  text {
    font-size: 3.5vw;
  }

  .money-icons {
    width: 2.5vh;
    height: 2.5vh;
    margin-right: 5rpx;
  }
}

/* 使用 ::v-deep */
::v-deep .uni-card--shadow {
  box-shadow: none;
}

::v-deep .uni-card--border {
  border: none;
}

::v-deep .uni-card {
  box-shadow: none !important;
}
</style>
